<template>
  <div class="">
    <a href="https://gitee.com/monoplasty/vue3-slide-verify" target="_blank">vue3-slide-verify滑块拼图插件校验文档地址</a>
    <slide-verify
      class="margin-top20"
      ref="block"
      :slider-text="text"
      :accuracy="accuracy"
      :imgs="verifyImgs"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <a-button  class="margin-top20" type="primary" @click="handleClick">点我刷新</a-button>
    <div>{{ msg }}</div>
  </div>
</template>

<script setup>
import { defineComponent, ref } from "vue";
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import img1 from '@/assets/commonImgs/img1.jpg'
import img2 from '@/assets/commonImgs/img2.jpg'
import img3 from '@/assets/commonImgs/img3.jpg'

    const text ="向右滑动->";
    const accuracy = 1;//滑动验证的误差范围，默认值 5
    const verifyImgs = ref([img1,img2,img3]);//默认使用第三方api提供的图片路径 可能加载缓慢
    const msg = ref("");
    const block = ref();

    const onAgain = () => {
      msg.value = "检测到非人为操作的哦，请再试一次！";
      // 刷新
      block.value?.refresh();
    };

    const onSuccess = (times) => {
      msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    };

    const onFail = () => {
      msg.value = "验证不通过";
    };

    const onRefresh = () => {
      msg.value = "点击了刷新小图标";
    };

    const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };
</script>

<style lang="less" scoped>

</style>
